<!--用户组-->
<template>
  <div class="base-content system-user-group">
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item :label="dataList.GroupName" prop="name">
          <el-input
            v-model="filterForm.name"
            :placeholder="dataList.EnterGroupName"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>

        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ btn.Query }}</el-button
          >
          <el-button @click="cancelForm">{{ btn.Clear }}</el-button>
        </el-form-item>
      </el-form>

      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="addGroup"
          >{{ btn.Add }}</el-button
        >
      </div>
      <!--列表-->
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 150px)"
      >
        <el-table-column
          :prop="$i18n.locale === 'en' ? 'eName' : 'name'"
          :label="
            $i18n.locale === 'en' ? dataList.eGroupName : dataList.GroupName
          "
          min-width="80"
        />
        <el-table-column
          prop="remark"
          :label="dataList.Remark"
          min-width="120"
        />
        <el-table-column prop="status" :label="dataList.status">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              :disabled="!isEdit"
              @change="(val) => disabledUserGroup(val, row)"
              >{{ CommonConstStatus[row.status] }}</el-switch
            >
          </template>
        </el-table-column>
        <el-table-column :label="btn.operate" width="140">
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link type="primary" @click="lock(row)">{{
                btn.Look
              }}</el-link>
              <el-link
                v-rights="'Edit'"
                type="primary"
                @click="editGroup(row)"
                >{{ btn.Edit }}</el-link
              >
              <el-link
                v-rights="'Delete'"
                type="danger"
                @click="delGroup(row)"
                >{{ btn.Delete }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <PermissionUserGroupDialog
      v-model="isShowDialog"
      :read-only="readonly"
      :edit-id="editId"
      @success="userDialogCall"
    />
  </div>
</template>

<script>
import {
  GetUserGroupList,
  Delete,
  DisableById,
  EnableById,
} from "../../../api/Permission/PermissionUserGroup.js";
import PermissionUserGroupDialog from "./PermissionUserGroupDialog";
import { CommonConstStatus } from "../../../utils/dictionary";
import { mapGetters } from "vuex";
export default {
  name: "PermissionUserGroupList",
  components: {
    PermissionUserGroupDialog,
  },
  data() {
    return {
      isShowDialog: false,
      editId: "",
      CommonConstStatus,
      filterForm: {
        groupName: "",
      },
      searchLoading: false,
      total: 0,
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableLoad: false,
      tableData: [],
      readonly: false,
    };
  },
  computed: {
    ...mapGetters(["operateMap"]),
    isEdit() {
      return this.operateMap.get(`${this.$route.path}/Disable`);
    },
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      // // flag === filter 表示用户输入了搜索条件 从第一页开始查
      // if (flag) {
      //   this.pageInfo.pageIndex = 1;
      // }

      GetUserGroupList({
        ...this.filterForm,
        ...this.pageInfo,
      })
        .then((res) => {
          this.tableData = res.data.dataList;
          this.total = res.data.total;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },

    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },

    async disabledUserGroup(val, row) {
      if (!val) {
        await DisableById({ id: row.id });
      } else {
        await EnableById({ id: row.id });
      }
      this.getList();
    },
    userDialogCall() {
      this.getList();
    },

    // 清空筛选条件
    cancelForm() {
      this.$refs.filterForm.resetFields();
      this.getList("filter");
    },

    lock(row) {
      this.readonly = true;
      this.editId = row.id;
      this.isShowDialog = true;
    },

    addGroup() {
      this.readonly = false;
      this.editId = "";
      this.isShowDialog = true;
    },

    editGroup(row) {
      this.readonly = false;
      this.editId = row.id;
      this.isShowDialog = true;
    },

    delGroup(row) {
      const self = this;
      this.$confirm(
        this.$t("Permission.buttons.isDelData"),
        this.$t("Permission.buttons.Delete"),
        {
          type: "warning",
          confirmButtonText: this.$t("Permission.buttons.Confirm"),
          okType: "danger",
          center: true,
          cancelButtonText: this.$t("Permission.buttons.Cancel"),
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              Delete({ id: row.id })
                .then((res) => {
                  instance.confirmButtonLoading = false;
                  done();
                  self.getList();
                })
                .catch(() => {
                  instance.confirmButtonLoading = false;
                });
            } else {
              instance.confirmButtonLoading = false;
              done();
            }
          },
        }
      ).catch();
    },
  },
};
</script>

<style lang="scss" scoped>
.system-user-group {
}
</style>
